<template>
	<view class="wrap">
		<view class="top">
			<view class="item">
				<view class="left">收货人</view>
				<input type="text" placeholder-class="line" v-model="real_name" placeholder="请填写收货人姓名" />
			</view>
			<view class="item">
				<view class="left">手机号码</view>
				<input type="text" placeholder-class="line" v-model="phone" placeholder="请填写收货人手机号" />
			</view>
			<view class="item" @tap="showRegionPicker">
				<view class="left">所在地区</view>
				<input disabled type="text" v-model="address" placeholder-class="line" placeholder="省市区县、乡镇等" />
			</view>
			<view class="item address">
				<view class="left">详细地址</view>
				<textarea type="text" placeholder-class="line" v-model="detail" placeholder="街道、楼牌等" />
			</view>
		</view>
		<view class="bottom">
			<view class="default">
				<view class="left">
					<view class="set">设置默认地址</view>
					<switch :checked="is_default == 1" color="#20CBD4" @change="setDefault" />
				</view>
				<view class="right tips">提醒：每次下单会默认推荐该地址</view>
			</view>
		</view>
		<view class="save"><view class="btn" @click="saveAddress">保存地址</view></view>
		<u-picker mode="region" ref="uPicker" v-model="show" @cancel="cancel" @confirm="confirm"/>
		<u-toast ref="uToast" />
		<hoverMenu></hoverMenu>
	</view>
</template>

<script>
	import hoverMenu from "@/components/public/sa-hover-menu.vue";
	import {editAddress} from "@/common/api.js";
export default {
	components: {
		hoverMenu
	},
	data() {
		return {
			show: false,
			address:'',
			id:"",
			real_name:"",
			phone:"",
			province:"",
			city:"",
			district:"",
			detail:"",
			is_default:0,
			district_id:0
		};
	},
	onLoad(options){
		var address = JSON.parse(options.address)
		if(address != ""){
			this.id  = address.id;
			this.real_name  = address.real_name;
			this.phone  = address.phone;
			this.province  = address.province;
			this.city  = address.city;
			this.district  = address.district;
			this.detail  = address.detail;
			this.is_default  = address.is_default;
			this.district_id  = address.district_id;
			this.address  = address.province+address.city+address.district;
		}
	},
	methods: {
		floatTouchClick(index){
			this.$uniApi.floatTouch(index);
		},
		setDefault(e) {
			if(e.detail.value){
				this.is_default = "1";
			}else{
				this.is_default = "0";
			}
		},
		showRegionPicker() {
			this.show = true;
		},
		cancel(){
			this.show = false;
		},
		confirm(res){
			this.address = res.province.label+res.city.label+res.area.label;
			this.province  = res.province.label;
			this.city  = res.city.label;
			this.district  = res.area.label;
			this.district_id = res.area.value;
		},
		saveAddress(){
			if(this.real_name==''){
				this.$refs.uToast.show({title: '请输入收货人姓名',})
				return;
			}
			if(this.phone==''){
				this.$refs.uToast.show({title: '请输入手机号码',})
				return;
			}
			if (!this.$u.test.mobile(this.phone)) {
				this.$refs.uToast.show({title: '请输入正确的手机号码',})
			    return;
			 }
			if(this.address==''){
				this.$refs.uToast.show({title: '请选择所在地区',})
				return;
			}
			if(this.detail==''){
				this.$refs.uToast.show({title: '请输入详细地址',})
				return;
			}
			
			editAddress(this,{id:this.id,real_name:this.real_name,phone:this.phone,province:this.province,city:this.city,district:this.district,detail:this.detail,is_default:this.is_default,district_id:this.district_id});
		}
	}
};
</script>
<style>
	page{
		background-color: #F6F6F6;
	}
</style>
<style lang="scss" scoped>
/deep/ .line {
	color: $u-light-color;
	font-size: 28rpx;
}
.wrap {
	background-color: #f2f2f2;
	.top {
		background-color: #ffffff;
		border-top: solid 2rpx $u-border-color;
		padding: 22rpx;
		.item {
			display: flex;
			font-size: 32rpx;
			line-height: 100rpx;
			align-items: center;
			border-bottom: solid 2rpx $u-border-color;
			.left {
				width: 180rpx;
			}
			input {
				text-align: left;
			}
		}
		
		.address {
			padding: 20rpx 0;
			textarea {
				// width: 100%;
				height: 150rpx;
				background-color: #f7f7f7;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}
		}
		.site-clipboard {
			padding-right: 40rpx;
			textarea {
				// width: 100%;
				height: 150rpx;
				background-color: #f7f7f7;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}
			.clipboard {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				color: $u-tips-color;
				height: 80rpx;
				.icon {
					margin-top: 6rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
	.bottom {
		margin-top: 20rpx;
		padding: 40rpx;
		padding-right: 0;
		background-color: #ffffff;
		font-size: 28rpx;
		.tag {
			display: flex;
			.left {
				width: 160rpx;
			}
			.right {
				display: flex;
				flex-wrap: wrap;
				.tags {
					width: 140rpx;
					padding: 16rpx 8rpx;
					border: solid 2rpx $u-border-color;
					text-align: center;
					border-radius: 50rpx;
					margin: 0 10rpx 20rpx;
					display: flex;
					font-size: 28rpx;
					align-items: center;
					justify-content: center;
					color: $u-content-color;
					line-height: 1;
				}
				.plus {
					//padding: 10rpx 0;
				}
			}
		}
		.default {
			padding-bottom: 40rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: solid 2rpx $u-border-color;
			line-height: 64rpx;
			.tips {
				color: #909399;
				font-size: 24rpx;
			}
			.right {
			}
		}
	}
}
.save {
  margin-top: 300rpx;
  width: 100%;
  height: 120upx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.save view {
  display: flex;
}

.save .btn {
  background-color: #20CBD4;
  box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.4);
  width: 70%;
  height: 80upx;
  border-radius: 80upx;
  color: #fff;
  justify-content: center;
  align-items: center;
  font-size: 30upx;
}
</style>
